<template>
    <el-menu default-active="1-4-1"
             :default-active="this.$route.path"
             :router="true"
             class="el-menu-vertical-demo"
             @open="handleOpen"
             @close="handleClose"
             :collapse="isCollapse"
             :unique-opened="true"
             background-color="#001529"
             text-color="#fff"
    >
        <el-menu-item index="/">
            <i class="el-icon-s-home"></i>
            <span slot="title">系统首页      </span>
        </el-menu-item>


        <el-submenu index="1">
            <template slot="title">
                <i class="el-icon-s-custom"></i>
                <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;          患者</span>
            </template>
            <el-menu-item-group>
                <el-menu-item index="/patient">患者列表</el-menu-item>
            </el-menu-item-group>
        </el-submenu>

        <el-submenu index="2">
            <template slot="title">
                <i class="el-icon-s-custom"></i>
                <span>健康宣传资料管理</span>
            </template>
            <el-menu-item-group>
                <el-menu-item index="/health/img">新建图文</el-menu-item>
                <el-menu-item index="/health/video">新建视频</el-menu-item>
            </el-menu-item-group>
        </el-submenu>
    </el-menu>
</template>

<script>
    export default {
        name: "Menu",
        data() {
            return {
                isCollapse: false
            }
        },
        methods: {
            handleOpen() {

            },
            handleClose() {

            },
        },
        created() {
            console.log(this.$router.options)
        }
    }
</script>

<style scoped lang="less">
    /deep/ .el-submenu {
        width: 240px;

        &.is-active {
            color: #fff;
            background-color: #409EFF;
        }
    }
    .el-menu-item{
        /*display: flex;*/
        /*justify-content: flex-start;*/
        /*align-items: center;*/
    }
</style>